import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router';
import SideNavButton from './components/SideNavButton.js';
import UserEntry from './userentry';

export default class HeaderComponent extends Component {
  constructor(props) {
    super(props);
    this.onToggleSidebar = this.onToggleSidebar.bind(this);
  }

  onToggleSidebar() {
    const { rootAction } = this.props;
    rootAction.toggleSidebarDisplay();
  }

  render() {
    const { sidebarVisibility, userProfile, router, rootAction } = this.props;
    return (
      <header>
        <SideNavButton sidebarVisibility={sidebarVisibility} onClick={this.onToggleSidebar} />
        <Link to="/">
          <span className="header-content">Verse</span>
        </Link>
        <UserEntry
          userProfile={userProfile}
          router={router}
          rootAction={rootAction}
        />
      </header>
    );
  }
}

HeaderComponent.propTypes = {
  sidebarVisibility: PropTypes.bool,
  userProfile: PropTypes.object,
  rootAction: PropTypes.object,
  router: PropTypes.object,
};
